<template>
  <div class="home">
    <hls-video
      :src="videoSrc"
      :sourcesType="videoType"
      @canplay="doCanPlay"
      ref="myPlayer"
      @playerReady="playerReady"
      @playerDestory="playerDestory"
    ></hls-video>
  </div>
</template>

<script>
// @ is an alias to /src
import hlsVideo from "@/components/hls-video.vue";

export default {
  name: "Home",
  components: {
    hlsVideo,
  },
  data() {
    return {
      // videoSrc:'https://blz-videos.nosdn.127.net/1/HearthStone/f6cd63b590d416821d3e27e0.mp4',
      videoSrc:'https://yushou.qitu-zuida.com/20180814/11766_e661957f/index.m3u8',
      myPlayer: null,
      videoType:'m3u8'
    };
  },
  mounted() {},
  methods: {
    doCanPlay() {
      console.log("doCanplay");
    },
    playerReady(player) {
      this.$refs.myPlayer = player;
      this.addEvent();
    },
    addEvent() {
      this.$refs.myPlayer.addEventListener("play", function () {
        console.log("play111");
      });
    },
  },
};
</script>
